<template>
    <el-container>
        <el-header>
                <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left">
                     <a href="https://www.bilibili.com/video/BV14g41197PY/"><img src="../assets/logo.png" height="100%"
                                                                                 width="180px"></a>
                </span>
            <span id="avatar" style="float: right">
                    <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-link" style="margin-top: 10px; display: inline-block;">
                    <el-avatar></el-avatar>
                  </span>
                    <el-dropdown-menu slot="dropdown" style="margin-top: -10px">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                </span>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        background-color="#545c64"
                        text-color="#fff"
                        :router="true"
                        unique-opened="unique-opened"
                        active-text-color="#ffd04b">
                    <!--使用组件-->
                    <LeftMenu :menu-data="leftMenus"></LeftMenu>
                </el-menu>
            </el-aside>
            <el-main>
                 <!--视图渲染-->
                <router-view/>
            </el-main>
        </el-container>
        <el-footer>Footer</el-footer>
    </el-container>
</template>

<script>
    import LeftMenu from "@/components/LeftMenu";
    export default {
        name: "Home",
        components:{
            LeftMenu
        },
        data(){
           return {
               leftMenus:[],
           }
        },
        created() {
            this.initLeftMenu();
        },
        methods: {
            initLeftMenu(){
                this.$http.get("/system/permission/leftMenu").then(result=>{
                      if(result.data.code===2000){
                           this.leftMenus=result.data.data;
                      }
                })
            },
            getInfo() {
                this.$http.get("/system/user/getInfo").then(result => {
                    console.log(result)
                })
            },
            //拉下得触发事件
            handleCommand(command) {
                if (command === 'logout') {
                    //1.
                    this.$http.get("/system/logout").then(result => {
                        if (result.data.code === 2000) {
                            sessionStorage.clear();
                            this.$router.push("/login")
                        }
                    })
                }
            }
        }
    }
</script>
<!--当前vue有效-->
<style>
    html, body, #app {
        height: 100%;
    }

    body, #app {
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: #1F272F;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #545c64;
        color: #333;
        line-height: 560px;
    }

    .el-aside > .el-menu {
        border: none;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>